<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 显示组件外的数据 -->
			组件外的数据：{{msg}}
			<!-- 挂载父组件 -->
			<parent></parent>
		</div>
		<template id="temp">
			<div>
				<h1>这是父组件</h1>
				<!-- 显示接收自子组件的数据 -->
				<p>接收子组件传来的数据为：{{msg}}</p>
				<hr>
				<!-- 挂载子组件，并监听自定义事件 'cevent' -->
				<child @cevent='recvmsg'></child>
			</div>
		</template>

		<script src="../js/vue.js"></script>
		<script>
			Vue.component('parent', {
				template: "#temp",
				// 父组件的数据定义
				data() {
					return {
						msg: '' // 初始化为空字符串
					}
				},
				methods: {
					recvmsg(childmsg) {
						// 处理子组件传来的消息，更新父组件的 'msg' 数据
						this.msg = childmsg
					}
				},
			})
			Vue.component('child', {
				template: `
                <div>
                <h1>这是子组件</h1>
                <!-- 点击触发发送数据给父组件的方法 -->
                <button @click='sendmsg'>传递数据给父组件</button>
                </div>`,
				data() {
					return {
						age: 10 // 子组件的年龄数据，初始为 10
					}
				},
				methods: {
					sendmsg() {
						// 子组件的年龄增加 30
						this.age += 30
						// 触发自定义事件 'cevent' 并传递包含年龄的消息给父组件
						this.$emit('cevent', '年龄：' + this.age)
					}
				},
			})
			var vm = new Vue({
				el: "#app",
				// Vue 实例的数据定义
				data: {
					msg: 'Hello World' // 初始化组件外的数据 'msg'
				}
			})
		</script>
	</body>
</html>